<template>
  <div>
    <!-- 基本信息 -->
      <div class="listDiv">
        <el-form ref="form" :inline="true" :model="form" label-width="130px">
            <el-form-item label="城市名称">
            <el-input placeholder="请输入城市名称" v-model="form.name" ></el-input>
            </el-form-item>
        </el-form>
      </div>
    <!-- 关联省份 -->
      <div class="mb_20" v-if="this.$route.query.type==1">
        关联省份：
        <!-- <el-button type="primary" @click="dialogFormVisible=true">选择</el-button> -->
      </div>
      <div class="listDiv" v-if="this.$route.query.type==1">
        <el-table ref="tableData" :data="tableData" style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column label="省份名称" prop="province_name" align="center" />
          <el-table-column label="所属大区" prop="region_name" align="center" />
          <el-table-column label="创建时间" prop="created_at" align="center">
            <template slot-scope="scope">{{scope.row.created_at}}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="handleDelete(scope.$index)"
                v-if="is_update"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="allCenter">
        <el-button type="primary" @click="NextSubmit" >保存</el-button>
      </div>
    </div>
</template>

<script>
import {region_show,region_save} from "@/api/NewRetailSystem"
export default {
  props: {
    tab: {
      type: Number,
      default: () => {
        return null;
      }
    },
    activeId: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  filters: {
    // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date((e-0) * 1000).format("yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    }
  },
  data() {
    return {
      radio: "",
      tableData: [], //列表
      form: {
        level: 3,
        relation_ids:[],
        opt:null,
        id:this.$route.query.id,
        name:this.$route.query.area_name,
        page: 1,
        size: 10
      },
      form2:{name:null},
      dialogFormVisible: false, //弹窗
      savedisabled: false, //提交按钮禁用
      // 分页
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 0, // 总条目数,
      multipleSelection: [], //勾选数组
      fileList: [],
      is_update: true
    };
  },
  mounted(){
    // console.log(this.$route)
    if (this.$route.query.type==1) {
      this.$route.meta.title = "编辑城市";
      this.getList()
    } else {
      this.$route.meta.title = "添加城市";
    }
    // console.log(this.$route.meta.title);
  },
  watch: {},
  inject: ["reload"],
  methods: {
    // 主页列表
    async getList(){
      await region_show({id:this.$route.query.id - 0}).then(res=>{
        console.log(res);
        if(res.data.code==200){
          this.tableData=res.data.data.detail
        }
        
      })
    },
    //保存
    async NextSubmit() {
      let dates={...this.form}
      delete dates.page
      delete dates.size
    //   console.log(this.$route.query.type)
      if(this.$route.query.type){
        dates.opt=2
      }else{
        dates.opt=1  
      }
    //   console.log(dates.opt)
      dates.relation_ids=JSON.stringify(this.form.relation_ids)
      let res = await region_save(dates);
      if(res.data.code==200){
        this.$router.push({ path: "/cityManagement" });
        // this.reload();
      }
      
    },
    // 配置弹窗
    // handlePrize() {
      // this.dialogFormVisible = true;
    // },
    // 弹窗确认
    submitFn() {
        this.dialogFormVisible = false;
         this.tableData =[...this.multipleSelection] ;
    },
    // 勾选行的id
    getRowKeys(row) {
        return row.id;
    },
    // 勾选的数组
    handleSelectionChange(val) {
      let arr = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        arr.push(item.id);
      });
      this.form.relation_ids=arr
    },
    // 删除
    handleDelete(index) {
      let arr = [];
      this.tableData.splice(index, 1);
      this.tableData.forEach(item => {
        arr.push(item.id);
      });
      this.form.relation_ids=arr

    },
    // 弹窗名称查询
    handleSearch() {
        this.form.page = 1;
        this.regionList(this.form2);
    },
    // 弹窗关闭清空勾选
    close() {
        this.dialogFormVisible = false;
        this.form2 = {
          name: ""
        };
    },

    // 改变页面条数-弹窗
    handleSizeChange(val) {
        console.log("条数", this.form2);

        this.form.pagesize = val;
        this.regionList(this.form2);
    },
    // 选择页数-弹窗
    handleCurrentChange(val) {
        console.log("页数", this.form2);
        this.form.page = val;
        this.regionList(this.form2);
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style  scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.listDiv{
    padding: 20px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
.mb_20 {
  margin: 20px;
}
.mt_20 {
  margin-top: 20px;
}
.allCenter {
  text-align: center;
  margin: 20px;
}
</style>